<template>
  <div class="pop">
    <div class="pop-arrow"></div>
    <div class="pop-content">
      <div class="pop-title">
        <slot name="header"><ExclamationCircleFilled class="pop-title-icon" />{{ props.title }}</slot>
      </div>
      <div class="pop-desc">
        {{ props.desc }}
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { withDefaults } from 'vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'

const props = withDefaults(
  defineProps<{
    title?: string
    desc?: string
    placement?: string // 位置方向
    isShow?: boolean
  }>(),
  {
    title: '请注意',
    desc: '密码 3个月需强制修改',
    placement: 'bottom',
    isShow: false,
  }
)
</script>
<style lang="less" scoped>
.pop {
  position: relative;
  .pop-arrow {
    position: absolute;
    width: 20px;
    height: 20px;
    left: -10px;
    top: 18px;
    background: #fff;
    transform: rotateZ(45deg);
    z-index: 1;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
  }
  .pop-content {
    width: 272px;
    // height: 126px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    text-align: left;
    position: relative;
    z-index: 2;
    padding: 24px;
    .pop-title {
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #262525;
      line-height: 22px;
      display: flex;
      align-items: center;
      margin-bottom: 13px;
      &-icon {
        color: #d32f44;
        font-size: 18px;
        margin-right: 10px;
      }
    }
    .pop-desc {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 0.65);
      line-height: 22px;
      text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    }
  }
}
</style>
